{% extends 'base.html' %}
{% block T_head %}
{% endblock %}

{% block T_body %}
    <div class="container">
    <div>
      <ul class="nav nav-tabs nav-justified" id="index">
          {% for rating in rating_range %}
            {% if rating == 5%}
                <li class="active" ><a href="#{{ rating }}" data-toggle="tab">{{ rating }}分</a></li>
            {% else %}
                 <li><a href="#{{ rating }}" data-toggle="tab">{{ rating }}分</a></li>
            {% endif %}

          {% endfor %}
      </ul>
    </div>


    {% if user.is_authenticated %}
        <div class="tab-content" id="movies_content">
        {% for key, values in page_list.items %}
            {% if key == 5 %}
                 <div class="tab-pane fade in active" id={{ key }}>
            {% else %}
                 <div class="tab-pane fade in" id={{ key }}>
            {% endif %}
                <ul class="figures_lists">
                {% for value in values.page.object_list %}
                <li class="list_item col-sm-6 col-md-3" >
                    <a class="figure" >
                        <img src={{ value.poster_url }} alt={{ value.title }}>
                    </a>
                    <strong class="figure_title">
                    <a  target="_blank" href={{ value.url }}>{{ value.title }}</a>
                    </strong>
                </li>
                {% endfor %}
                </ul>

            <ul class="pagination">
            {# 如果当前页还有上一页 #}
            {% if values.page.has_previous %}
                <li>
                    {# 点击a标签，跳转到上一页链接 ?rating_{{ key }}_page  为地址后面拼接的参数 #}
                    <a href="?rating_{{ key }}_page={{values.page.previous_page_number}}">上一页</a>
                </li>
            {% else %}
                {# 如果没有上一页， 则上一页按钮不可点击 #}
                <li class="disabled">
                    <a href="#">上一页</a>
                </li>
            {% endif %}

            {% for page_number in values.paginator.page_range %}
                {# 获取当前页的页码 #}
                {% if page_number == values.page.number %}
                    {# 如果是当前页的话，选中 #}
                    <li class="active">
                        <a href="?rating_{{ key }}_page={{page_number}}">{{page_number}}</a>
                    </li>
                {% else %}
                    <li>
                        <a href="?rating_{{ key }}_page={{page_number}}">{{page_number}}</a>
                    </li>
                {% endif %}
            {% endfor %}

            {% if values.page.has_next %}
                <li>
                    <a href="?rating_{{ key }}_page={{values.page.next_page_number}}">下一页</a>
                </li>
            {% else %}
            <li class="disabled">
                <a href="#">下一页</a>
            </li>
            {% endif %}
        </ul>
                </div>
        {% endfor %}
        </div>
    {% endif %}


{% endblock %}